<!DOCTYPE html>
<html>
<head>
<title>项目展示</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Alice Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->		
<!--fonts-->
<!--<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400' rel='stylesheet' type='text/css'>-->
<!--<link href='http://fonts.useso.com/css?family=Signika:700,300,400,600' rel='stylesheet' type='text/css'>-->
<!--//fonts-->
<script src="js/jquery.min.js"> </script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- js -->
<script src="js/bootstrap.js"></script>
<!-- js -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<!--/script-->
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){		
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
});
});
</script>
</head>
<body>
<!--header-->
<div id="home" class="header">
		<div class="header-top">
			<div class="container">
					<div class="header-right-text">
						<h3>Call Us:<span></span><i>相信自己！我们是最完美的！</i></h3>
					</div>
					<div class="header-btn">
						<a href="#">Hello 跟我一起走进我的世界</a>
					</div>
			</div>
			<!--<div class="clearfix"></div>-->
		</div>
<div class="header-nav effect2">
	<div class="container">
		<div class="navigation">
			<nav class="navbar navbar-default">
				<div class="navbar-header">
					  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"> </span>
						<span class="icon-bar"> </span>
						<span class="icon-bar"> </span>
					  </button>
					</div>
					<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
					  <ul class="nav navbar-nav">
						<li class="active"><a class="scroll" href="#home">Home <span class="sr-only">(current)</span></a></li>
						<li><a class="scroll" href="#About">About</a></li>
						<li><a class="scroll" href="#Portfolio">Portfolio</a></li>
						<li><a class="scroll" href="#Contact">Contact Us</a></li>
					  </ul>
			  <div class="clearfix"> </div>
			</div><!-- /.navbar-collapse -->
		</nav>
	</div>
	</div>
	</div>
	<div class="clearfix"> </div>
</div>
			  <!-- script-for-menu -->
		 <script>
				$("span.menu").click(function(){
					$(".top-nav ul").slideToggle("slow" , function(){
					});
				});
		 </script>
		 <!-- script-for-menu -->
<div class="banner">
	<div class="container">
		<div class="grid__item color-9">
				<a class="link link--ilin" href="#"><span>Huang</span><span>Duan</span></a>
			</div>
		<p>A beautiful girl full of wisdom<span></span></p>
	</div>
</div>
<div class="content-part">
	<div class="body-pic">
		<div class="container bg">
			<div class="bk">
				<img src="images/f.png" />
				<div class="jieshao">
					<h3 >About me</h3>
					<span >
						I am a optimistic girl It is more serious and responsible Ready to help others!
					</span>

				</div>
			</div>

		</div>
		<!--<div class="body-pic-bottom">-->
	</div>
</div>
<div class="clearfix"> </div>
<div id="About" class="skills">
	<div class="container">
		<div class="skills-info">
		<h3>Skills</h3>
			<div class="study2">
						<h4>Html</h4>
							<div class="progress">
							  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
								<span class="sr-only">40% Complete (success)</span>
							  </div>
							</div>
						<h4>Css</h4>
						<div class="progress">
						  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
							<span class="sr-only">20% Complete</span>
						  </div>
						</div>
						<h4>Js</h4>
						<div class="progress">
						  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
							<span class="sr-only">60% Complete (warning)</span>
						  </div>
						</div>
						<h4>Php</h4><h4>
						<div class="progress">
						  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
							<span class="sr-only">80% Complete (danger)</span>
						  </div>
						</div>
						</h4>
			</div>
			</div>
			</div>
			</div>
</div>
<div class="social-icon">
	<div class="container">
		<a href="#">
		<div class="facebook">
			<span class="icon1"> </span>
			<label><i>3958k</i> <br />Likes</label>
		</div>
		</a>
		<a href="#">
		<div class="twitter">
			<span class="icon2"> </span>
			<label><i>125k</i> <br />Followers</label>
		</div>
		</a>
		<a href="#">
		<div class="youtube">
			<span class="icon3"> </span>
			<label><i>10,000k</i> <br />Followers</label>	
		</div>
		</a>
		<a href="#">
		<div class="linkdin">
			<span class="icon4"> </span>
			<label><i>87k</i> <br />Followers</label>
		</div>
		</a>
		<div class="clearfix"> </div>
	</div>
	<div class="clearfix"> </div>
</div>
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div>
		<!--light-box-js -->
				<script src="js/jquery.chocolat.js"></script>
				<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8" />
				<!--light-box-files -->
				<script type="text/javascript" charset="utf-8">
				$(function() {
					$('.moments-bottom a').Chocolat();
				});
				</script> 
			<!--//end-gallery js-->
<div id="Portfolio" class="portfolio">
			<div class="container">
				<h3>Portfolio</h3>
        <div class="gallery-info">
				<div class="col-md-4 galry-grids moments-bottom">
					<a class="b-link-stripe b-animate-go" href="images/img9.jpg">
						<img src="images/img9.jpg" class="img-responsive" alt="">
						<div class="b-wrapper">
							<span class="b-animate b-from-left    b-delay03 ">
								<img class="img-responsive" src="images/e.png" alt=""/>
							</span>					
						</div>
					</a>				
				</div>
				<div class="col-md-4 galry-grids moments-bottom">
					<a class="b-link-stripe b-animate-go" href="images/img10.jpg">
						<img src="images/img10.jpg" class="img-responsive" alt="">
						<div class="b-wrapper">
							<span class="b-animate b-from-left b-delay03 ">
								<img class="img-responsive" src="images/e.png" alt=""/>
							</span>					
						</div>
					</a>				
				</div>
				<div class="col-md-4 galry-grids moments-bottom">
					<a class="b-link-stripe b-animate-go" href="images/img11.jpg">
						<img src="images/img11.jpg" class="img-responsive" alt="">
						<div class="b-wrapper">
							<span class="b-animate b-from-left    b-delay03 ">
								<img class="img-responsive" src="images/e.png" alt=""/>
							</span>					
						</div>
					</a>				
				</div>				
				<div class="col-md-4 galry-grids moments-bottom">
					<a class="b-link-stripe b-animate-go" href="images/img12.jpg">
						<img src="images/img12.jpg" class="img-responsive" alt="">
						<div class="b-wrapper">
							<span class="b-animate b-from-left    b-delay03 ">
								<img class="img-responsive" src="images/e.png" alt=""/>
							</span>					
						</div>
					</a>				
				</div>
				<div class="col-md-4 galry-grids moments-bottom">
					<a class="b-link-stripe b-animate-go" href="images/img13.jpg">
						<img src="images/img13.jpg" class="img-responsive" alt="">
						<div class="b-wrapper">
							<span class="b-animate b-from-left    b-delay03 ">
								<img class="img-responsive" src="images/e.png" alt=""/>
							</span>					
						</div>
					</a>				
				</div>
				<div class="col-md-4 galry-grids moments-bottom">
					<a class="b-link-stripe b-animate-go" href="images/img14.jpg">
						<img src="images/img14.jpg" class="img-responsive" alt="">
						<div class="b-wrapper">
							<span class="b-animate b-from-left    b-delay03 ">
								<img class="img-responsive" src="images/e.png" alt=""/>
							</span>					
						</div>
					</a>				
				</div>
				<div class="col-md-4 galry-grids moments-bottom">
					<a class="b-link-stripe b-animate-go" href="images/img15.jpg">
						<img src="images/img15.jpg" class="img-responsive" alt="">
						<div class="b-wrapper">
							<span class="b-animate b-from-left    b-delay03 ">
								<img class="img-responsive" src="images/e.png" alt=""/>
							</span>					
						</div>
					</a>				
				</div>
				<div class="col-md-4 galry-grids moments-bottom">
					<a class="b-link-stripe b-animate-go" href="images/img16.jpg">
						<img src="images/img16.jpg" class="img-responsive" alt="">
						<div class="b-wrapper">
							<span class="b-animate b-from-left    b-delay03 ">
								<img class="img-responsive" src="images/e.png" alt=""/>
							</span>					
						</div>
					</a>				
				</div>
				<div class="col-md-4 galry-grids moments-bottom">
					<a class="b-link-stripe b-animate-go" href="images/img17.jpg" >
						<img src="images/img17.jpg" class="img-responsive" alt="">
						<div class="b-wrapper">
							<span class="b-animate b-from-left    b-delay03 ">
								<img class="img-responsive" src="images/e.png" alt=""/>
							</span>					
						</div>
					</a>				
				</div>
				<div class="clearfix"> </div>
			</div>
			</div>
</div>
			<div id="Contact" class="contact">
	<div class="container">
		<div class="content_middle_bottom">
          <h3 class="tz-title-3">Get In Touch</h3>
		  <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
		</div>
		<div class="col-sm-8 grid_2">
		   <h3>Say hello!</h3>
	       <form>
			 <input type="text" class="text" value="Name" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name';}">
			 <input type="text" class="text" value="Email" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Email';}">
			 <textarea value="Message" onFocus="this.value= '';" onBlur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
			 <input type="submit" value="Send Message">
		  </form>
	    </div>
		<!--<div class="col-sm-4 map">-->
				<!--<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d103344.96318068985!2d-83.9250825!3d35.9584634!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x885c162246ce42a9%3A0x7bea92dac4f534c5!2sKnoxville%2C+TN%2C+USA!5e0!3m2!1sen!2sin!4v1434174666221" frameborder="0" style="border:0"> </iframe>-->
		<!--</div>-->
		<div class="clearfix"> </div>
	</div>
</div>
<div class="footer">
	<div class="copy">
		<p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
   </div>
   <script type="text/javascript">
		$(document).ready(function() {

			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear'
			};

			$().UItoTop({ easingType: 'easeOutQuart' });

		});
	</script>
	<a href="#" id="toTop" style="display: block;"><span id="toTopHover"></span> <span id="toTopHover" style="opacity: 1;"> </span></a>
</div>
</body>
</html>